<!DOCTYPE html>
<html>
<head>
    <title>honeychat</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="/honeyms/blog/js/sockjs.min.js"></script>
    <script src="/honeyms/blog/js/stomp.min.js"></script>
</head>
<body>
    <div id="main-content" class="container" style="margin-top: 10px;">
        <div class="row">
            <form class="navbar-form" style="margin-left:0px">
                <div class="col-md-12">
                    <div class="form-group">
                    	<div class="form-group col-md-6">
                    		<input type="text" id="roomnum" class="form-control" placeholder="请输入房间号">
                    	</div>
                    	<div class="form-group col-md-6">
                    		<button class="btn btn-info" onclick="chatroomnum();" type="button">确定</button>
                    		<button class="btn btn-danger" type="button" onclick="disconnect();">断开连接</button>
                    	</div>
                    </div>
                </div>
            </form>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h5 class="page-header" style="font-weight:bold">接收到的消息：</h5>
                <table class="table table-striped">
                    <tbody id="information"></tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label for="content">发送的消息内容：</label>
                <input type="text" id="content" class="form-control" placeholder="消息内容">
            </div>
            <!-- <button class="btn btn-info" onclick="sendMessageNoParameter();" type="button">发送</button> -->
            <button class="btn btn-danger" onclick="cleaner();" type="button">清空内容</button>
            <button class="btn btn-primary" onclick="notice();" type="button">发送通知</button>
        </div>
    </div>
</body>
<script type="text/javascript">
		//设置 STOMP 客户端
		var stompClient = null;
		// 设置 WebSocket 进入端点
		var SOCKET_ENDPOINT = "/msg";
		// 设置订阅消息的请求前缀
		var SUBSCRIBE_PREFIX = "/chat/"
		// 设置房间号
		var url = "";
		// 设置服务器端点，访问服务器中哪个接口
		var SEND_ENDPOINT = "/client/socket";

		
		/* 进行连接 */
		function connect() {
		    // 设置 SOCKET
		    var socket = new SockJS(SOCKET_ENDPOINT);
		    // 配置 STOMP 客户端
		    stompClient = Stomp.over(socket);
		    // STOMP 客户端连接
		    stompClient.connect({}, function (frame) {
		    	receive()
		    });
		    
		}
		
		
		
		/* 断开连接 */
		function disconnect() {
		    stompClient.disconnect(function() {
		        alert("断开连接");
		    });
		}
		
		//输入房间号
		function chatroomnum(){
			if($("#roomnum").val()==''){
				alert("请输入房间号!");
			}
			connect();
		}
		
		//清屏
		function cleaner(){
			$('table tbody').empty();
		}
		
		//通过controller发送消息
		function notice(){
			var msg = $("#content").val();
			url = SUBSCRIBE_PREFIX + $("#roomnum").val();
			if(msg==''){
			   return alert("说点什么吧!");
			}
			if($("#roomnum").val()==''){
			   return alert("请输入房间号!");
			}
			$.ajax({
		        type: "POST",
		        url: "/chat/sendmsg",
		        dataType: "JSON",
		        data: {"msg":msg,"sendUrl":url},
		        success: function(result) {
		        	//layer.msg(result.msg);
		        	$("#content").val("")
		        }
		      });
		}
		
		//接受消息
		function receive(){
			url = SUBSCRIBE_PREFIX + $("#roomnum").val();
		    // 执行订阅消息
		    stompClient.subscribe(url, function (responseBody) {
		        var receiveMessage = JSON.parse(responseBody.body);
		        $("#information").append("<tr><td>" + receiveMessage.userName + "</td><td>" + receiveMessage.msg + "</td><td>" + receiveMessage.sendTime + "</td></tr>");
		    });
		}
</script>
</html>